<template>
  <div>
    <!-- 搜索 -->
    <van-search
      class="home-search"
      shape="round"
      placeholder="请输入搜索关键词"
      @focus="$router.push('/search')"
    >
      <template v-slot:left>
        <img class="img-youping" src="@/assets/image/youping.png" />
      </template>
    </van-search>

    <!-- 导航条 -->
    <van-tabs title-active-color="red" v-model="active" line-height="0">
      <van-tab :name="0" :title="title">
        <!-- <shop-list></shop-list> -->
      </van-tab>
      <van-tab :name="1" :title="`价格`">
        <!-- <shop-list></shop-list> -->
      </van-tab>
      <van-tab :name="2" :title="`销量`">
        <!-- <shop-list></shop-list> -->
      </van-tab>
      <van-tab :name="3" :title="`新品`">
        <!--  -->
      </van-tab>
    </van-tabs>

    <!-- 产品详情 -->
    <router-link
      tag="a"
      :to="{ path: '/detail', query: { id: item.id } }"
      v-for="item in productList"
      :key="item.id"
    >
      <van-card
        :num="item.stock"
        :price="item.price"
        desc="描述信息"
        :title="item.store_name"
        :thumb="item.image"
      />
    </router-link>
  </div>
</template>
<script>
export default {
  data() {
    return {
      productList: [],
      active: "",
      title: null, //商品名称
    };
  },
  created() {
    this.title = this.$route.query.titles;
    // console.log("分类名==>", this.$route.query.titles);
    let sid = this.$route.query.id;
    this.axios
      .get("/products", {
        params: {
          sid: sid,
        },
      })
      .then((re) => {
        this.productList = re;
      });
  },
  methods: {
    onSearch(val) {
      this.$toast(val);
    },
  },
};
</script>